.bg
  background-color: $bg !important
.bg-white
  background-color: #fff !important
.bg-grey
  background-color: #eee !important
.bg-primary
  background-color: $primary !important
  color: #fff !important
.bg-red
  background-color: $red !important
  color: #fff !important
.bg-blue
  background-color: $light-blue !important
  color: #fff !important
.bg-orange
  background-color: $orange !important
  color: #fff !important
.bg-purple
  background-color: $purple !important
  color: #fff !important
.bg-green
  background-color: $green !important
  color: #fff !important
.bg-deep-orange
  background-color: $deep-orange !important
  color: #fff !important
.bg-indigo
  background-color: $indigo !important
  color: #fff !important
.bg-teal
  background-color: $teal !important
  color: #fff !important
.bg-pink
  background-color: $pink !important
  color: #fff !important
.bg-yellow
  background-color: $yellow !important
  color: $red !important
.bg-amber
  background-color: $amber !important
  color: #fff !important
// Text color
.tc-primary
  color: $primary !important
.tc-red
  color: $red !important
.tc-blue
  color: $light-blue !important
.tc-orange
  color: $orange !important
.tc-purple
  color: $purple !important
.tc-green
  color: $green !important
.tc-deep-orange
  color: $deep-orange !important
.tc-indigo
  color: $indigo !important
.tc-teal
  color: $teal !important
.tc-pink
  color: $pink !important

.bg-red-purple-bottom
  background: $bg-red-purple-bottom
.bg-red-orange
  background: $bg-red-orange
  box-shadow: 0 10rpx 20rpx rgba($orange, 0.3)
.bg-cyan-blue
  background: $bg-cyan-blue
  box-shadow: 0 10rpx 20rpx rgba($blue, 0.3)
.bg-blue-deep-purple
  background: $bg-blue-purple
  box-shadow: 0 10rpx 20rpx rgba($purple, 0.3)
.bg-green-blue
  background: $bg-green-blue
  box-shadow: 0 10rpx 20rpx rgba($blue, 0.3)
.bg-purple-deep-light
  background: $bg-purple-deep-light
  box-shadow: 0 10rpx 20rpx rgba($purple, 0.3)
.bg-orange-deep-light
  background: $bg-orange-deep-light
  box-shadow: 0 10rpx 20rpx rgba($orange, 0.3)
.bg-pink-orange
  background: $bg-pink-orange
  box-shadow: 0 10rpx 20rpx rgba($pink, 0.3)
.bg-red-deep-bottom
  background: $bg-red-deep-bottom
  box-shadow: 0 10rpx 20rpx rgba($pink, 0.3)
.bg-o-y
  background: linear-gradient(to bottom right, #fc7e48, #ffbe69)
  box-shadow: 0 10rpx 20rpx rgba(#ffbe69, 0.3)
.bg-dp-p
  background: linear-gradient(to bottom right, #8683de, #ee8bef)
  box-shadow: 0 10rpx 20rpx rgba(#ee8bef, 0.3)
.bg-b-c
  background: linear-gradient(to bottom right, #5aa2e4, #73dcc4)
  box-shadow: 0 10rpx 20rpx rgba(#73dcc4, 0.3)
.bg-o-pink
  background: linear-gradient(to bottom right, #f9c785, #f069bc)
  box-shadow: 0 10rpx 20rpx rgba(#f069bc, 0.3)
.bg-r-o
  background: linear-gradient(to bottom right, #ff6565, #ffae69)
  box-shadow: 0 10rpx 20rpx rgba(#ffae69, 0.3)
.bg-r-o-v
  background: linear-gradient($primary, #ff9d4d)
  box-shadow: 0 10rpx 20rpx rgba(#ff9d4d, 0.4)
